<template>
  <div class="draw">
    <!-- 订酒店 -->
    <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
      <el-tab-pane label="全部" name="all"></el-tab-pane>
      <el-tab-pane label="毕业推荐"></el-tab-pane>
      <el-tab-pane label="点亮心中奇梦"></el-tab-pane>
      <el-tab-pane label="夜游外滩"></el-tab-pane>
      <el-tab-pane label="魔都周免酒店推荐"></el-tab-pane>
      <el-tab-pane label="上海奢华之选"></el-tab-pane>
      <el-tab-pane label="风情老洋房"></el-tab-pane>
      <el-tab-pane label="特色青旅"></el-tab-pane>
    </el-tabs>
    <!-- 选择规则 -->
    <el-row class="hotel-toolbar">
      <el-col :span="6">
        <p class="ptype">
          价格
          <span class="price">&yen; {{ value[0] }}--{{ value[1] }}元</span>
        </p>
        <p>
          <el-slider v-model="value" range show-stops :max="1000"> </el-slider>
        </p>
      </el-col>
      <el-col :span="3">
        <p class="ptype">住宿等级</p>
        <p>
          <span v-if="!pingfen == 0">{{ pingfen }} </span>
          <span v-else>不限</span>
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              <i class="el-icon-caret-bottom idowd"></i>
            </span>
            <el-dropdown-menu slot="dropdown" class="rate">
              <p class="val5" @click="choose(5)">
                <i :class="{ choosei: ischoose5 == true }"></i>
                <el-rate
                  v-model="value1"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}"
                >
                </el-rate>
              </p>
              <p class="val5" @click="choose(4)">
                <i :class="{ choosei: ischoose4 == true }"></i>
                <el-rate
                  v-model="value2"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}"
                ></el-rate>
              </p>
              <p class="val5" @click="choose(3)">
                <i :class="{ choosei: ischoose3 == true }"></i>
                <el-rate
                  v-model="value3"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}"
                ></el-rate>
              </p>
              <p class="val5" @click="choose(2)">
                <i :class="{ choosei: ischoose2 == true }"></i>
                <el-rate
                  v-model="value4"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}"
                ></el-rate>
              </p>
              <p class="val5" @click="choose(1)">
                <i :class="{ choosei: ischoose1 == true }"></i>

                <el-rate
                  v-model="value5"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}"
                >
                </el-rate>
              </p>
              <p
                style="
                  padding-right: 10px;
                  color: #666;
                  border-top: 1px solid #ccc;
                "
                align="right"
              >
                <button @click="pclear">清空</button>
              </p>
            </el-dropdown-menu>
          </el-dropdown>
        </p>
      </el-col>
      <el-col :span="3">
        <p class="ptype">住宿类型</p>
        <p>
          不限
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              <i class="el-icon-caret-bottom idowd"></i>
            </span>
            <el-dropdown-menu slot="dropdown" class="typerate">
              <p class="val5">
                <i></i>
                度假村
              </p>
              <p class="val5">
                <i></i>
                客栈
              </p>
              <p class="val5">
                <i></i>
                青年旅馆
              </p>
              <p class="val5">
                <i></i>
                经济 / 连锁
              </p>
              <p class="val5">
                <i></i>
                名宿 888
              </p>
              <p
                style="
                  padding-right: 10px;
                  color: #666;
                  border-top: 1px solid #ccc;
                "
                align="right"
              >
                <button @click="pclear">清空</button>
              </p>
            </el-dropdown-menu>
          </el-dropdown>
        </p>
      </el-col>
      <el-col :span="3">
        <p class="ptype">设施</p>
        <p>
          不限
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              <i class="el-icon-caret-bottom idowd"></i>
            </span>
            <el-dropdown-menu slot="dropdown" class="typerate">
              <p class="val5">
                <i></i>
                电梯
              </p>
              <p class="val5">
                <i></i>
                行李寄存
              </p>
              <p class="val5">
                <i></i>
                无烟客房
              </p>
              <p class="val5">
                <i></i>
                独立浴室
              </p>
              <p class="val5">
                <i></i>
                健身中心
              </p>
              <p
                style="
                  padding-right: 10px;
                  color: #666;
                  border-top: 1px solid #ccc;
                "
                align="right"
              >
                <button @click="pclear">清空</button>
              </p>
            </el-dropdown-menu>
          </el-dropdown>
        </p>
      </el-col>
      <el-col :span="3">
        <p class="ptype">品牌</p>
        <p>
          不限
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              <i class="el-icon-caret-bottom idowd"></i>
            </span>
            <el-dropdown-menu slot="dropdown" class="typerate">
              <p class="val5">
                <i></i>
                五星级酒店
              </p>
              <p class="val5">
                <i></i>
                客栈
              </p>
              <p class="val5">
                <i></i>
                青年旅馆
              </p>
              <p class="val5">
                <i></i>
                经济 / 连锁
              </p>
              <p class="val5">
                <i></i>
                名宿 888
              </p>
              <p
                style="
                  padding-right: 10px;
                  color: #666;
                  border-top: 1px solid #ccc;
                "
                align="right"
              >
                <button @click="pclear">清空</button>
              </p>
            </el-dropdown-menu>
          </el-dropdown>
        </p>
      </el-col>
      <el-col :span="6" class="col-6">
        <p class="ptype">与指定地点距离</p>
        <p>
          选择地点
          <span class="idowd"
            >10公里
            <el-dropdown trigger="click" class="posi">
              <span class="el-dropdown-link">
                <i class="el-icon-caret-bottom idowd10"></i>
              </span>
              <el-dropdown-menu slot="dropdown" class="addressrate">
                <p class="val5">
                  <span>距离</span>
                  <span style="padding-left: 100px">{{ value6 }}公里内</span>
                </p>
                <p class="val5">
                  <el-slider v-model="value6" :show-tooltip="false"></el-slider>
                </p>
                <p class="val5">
                  <i></i>
                  罗腾堡老城
                </p>
                <p class="val5">
                  <i></i>
                  罗腾堡
                </p>
                <p class="val5">
                  <i></i>
                  罗德拱门
                </p>
                <p class="val5">
                  <i></i>
                  木偶玩具博物馆
                </p>
                <p class="val5">
                  <i></i>
                  罗腾堡城堡花园
                </p>
                <p
                  style="
                    padding-right: 10px;
                    color: #666;
                    border-top: 1px solid #ccc;
                  "
                  align="right"
                >
                  <button @click="pclear">清空</button>
                </p>
              </el-dropdown-menu>
            </el-dropdown>
          </span>
        </p>
      </el-col>
    </el-row>
    <!-- 临近地铁,收藏 -->
    <el-row class="ditie">
      <el-col :span="2"> <b>1480</b>家酒店 </el-col>
      <el-col :span="2">
        <i
          class="iconradio"
          :class="{ active: isditie == true }"
          @click="ditie"
        ></i>
        临地铁
      </el-col>
      <el-col :span="2">
        <i
          class="iconradio"
          :class="{ active: isactive == true }"
          @click="shoucang"
        ></i>
        收藏
      </el-col>
      <el-col :span="4">
        <i class="el-icon-search"></i>
        <input
          class="input"
          type="text"
          placeholder="搜索酒店名称"
          v-model="hoteltitletxt"
          @click="hoteltitle"
          @keyup.enter="hoteltitle"
        />
      </el-col>
      <el-col :span="2" :offset="9">
        <a href="#">综合排名</a>
      </el-col>
      <el-col :span="1">
        <a href="#">销量</a>
      </el-col>
      <el-col :span="2">
        <a href="#"
          >价格
          <i class="el-icon-caret-bottom iconbottom"></i>
          <i class="el-icon-caret-top icontop"></i>
        </a>
      </el-col>
    </el-row>
    <!-- 列表部分 -->

    <ul class="hotel-list">
      <li class="li1" v-for="item of hotelist" :key="item.id">
        <!-- 图片 -->

        <el-image
          lazy
          class="hotelimg"
          :src="item.image"
          alt=""
          @click="gotodetail(item.id)"
        />
        <!-- 酒店内容介绍 -->
        <div class="hotel-item">
          <h3 @click="gotodetail(item.id)">{{ item.title }}</h3>
          <i class="el-icon-star-off sc" id="scid">收藏</i>
          <p>{{ item.lable }}</p>
          <div class="hotel-info">
            <ul class="nums" type="none">
              <li class="rating">
                <el-progress
                  type="dashboard"
                  class="ratnum"
                  :percentage="item.num * 10 || star"
                  :color="colors"
                ></el-progress>
                <p class="nice"><b>很好</b></p>
              </li>
              <li class="link">
                <em>{{ item.evanum }}</em
                >条评论
              </li>
            </ul>
            <p class="summary"></p>
            <div class="location">
              <span title="人民路839号"
                ><i class="el-icon-location"></i>{{ item.address }}</span
              >
            </div>
          </div>
          <div class="table">
            <table>
              <tr>
                <td>
                  <img
                    src="https://images.mafengwo.net/images/hotel/ota/booking_w100h20_2x_2.png"
                    alt=""
                  />
                </td>
                <td>
                  <b>&yen;789</b>起
                  <i class="el-icon-arrow-right"></i>
                </td>
              </tr>
              <tr>
                <td>
                  <img
                    src="https://images.mafengwo.net/images/hotel/newlogo/mafengwo_2018@2x.png"
                    alt=""
                  />
                </td>
                <td>
                  <b>&yen;625</b>起
                  <i class="el-icon-arrow-right"></i>
                </td>
              </tr>
              <tr>
                <td>agoda</td>
                <td>
                  <b>&yen;168</b>起
                  <i class="el-icon-arrow-right"></i>
                </td>
              </tr>
              <tr>
                <td>携程</td>
                <td>
                  <b>&yen;963</b>起
                  <i class="el-icon-arrow-right"></i>
                </td>
              </tr>
              <tr>
                <td>有鱼订房</td>
                <td>
                  <b>&yen;785</b>起
                  <i class="el-icon-arrow-right"></i>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </li>
    </ul>
    <div style="width: 200px; margin: 0 auto">
      <kong v-if="iskong">
        <span>暂未查到数据</span>
      </kong>
    </div>
    <!-- 分页功能 -->
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalvalue"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import kong from "../../commonality/kong.vue";
import sessionLogin from "../../http/session";
export default {
  name: "themehotel",
  data() {
    return {
      activeName: "all", //默认选择全部
      value: [0, 800], //价格区间
      value1: 5, //评分5
      value2: 4, //评分4
      value3: 3, //评分3
      value4: 2, //评分2
      value5: 1, //评分1
      pingfen: 0,
      value6: 10,
      total: 1, //综数据
      totalvalue: 0, //总页数
      currentPage1: 1, //显示的当前页数
      nub: 10, //多少条
      aid: "",
      hotelist: [],
      isactive: false,
      ischoose5: false,
      ischoose4: false,
      ischoose3: false,
      ischoose2: false,
      ischoose1: false,
      isditie: false,
      hoteltitletxt: "", //搜索酒店的关键字
      colors: [
        { color: "#f56c6c", percentage: 20 },
        { color: "#e6a23c", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#1989fa", percentage: 80 },
        { color: "#409eff", percentage: 100 },
      ],
      iskong: false,
      star:96,
    };
  },
  mounted() {
    this.aid = this.$route.params.title;
    this.list();
  },
  components: {
    kong,
  },
  methods: {
    // 按评分赛选
    Star(pf) {
      this.$http
        .post("/hotelFiltrateStar", {
          numpage: pf,
          nub: this.nub,
          mid: this.currentPage1,
        })
        .then((res) => {
          // console.log(res)
          this.totalvalue = res.data.num[0].num;
          this.hotelist = res.data.data;
          this.hoteltitletxt = "";
          if (res.data.data.length == 0) {
            this.iskong = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 跳转到详情页
    gotodetail(id) {
      this.$router.push("/detailHotel/" + id);
    },
    // 点击
    handleClick(tab) {
      // console.log("**",tab.label);
      this.$http
        .post("/hotelFiltrate", {
          filter: tab.label,
          nub: this.nub,
          mid: this.currentPage1,
        })
        .then((res) => {
          // console.log(res)
          this.totalvalue = res.data.num[0].num;
          this.hotelist = res.data.data;
          this.hoteltitletxt = "";
          if (res.data.data.length == 0) {
            this.iskong = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 清空功能
    pclear() {
      this.ischoose5 = false;
      this.ischoose4 = false;
      this.ischoose3 = false;
      this.ischoose2 = false;
      this.ischoose1 = false;
      this.pingfen = 0;
      this.list();
    },
    //每页显示的数量
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.nub = val;
      this.list();
    },
    // 显示当前第几页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage1 = val;
      this.list();
    },
    // 列表
    list() {
      this.$http
        .post("/hotelHomeList", {
          aid: this.aid,
          nub: this.nub,
          mid: this.currentPage1,
        })
        .then((res) => {
          // console.log(res);
          this.totalvalue = res.data.num[0].num;
          this.hotelist = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 收藏
    shoucang() {
      if (sessionStorage.getItem("cookie-session")) {
        sessionLogin().then((res) => {
          var uname = res.data.data[0].uname;
          if (this.isactive) {
            this.isactive = false;
            this.list();
          } else {
            this.isactive = true;
            this.$http
              .get("/collectInfoHotel", {
                params: {
                  username: uname,
                },
              })
              .then((res) => {
                console.log("---",res)
                this.totalvalue = res.data.data.length;
                this.hotelist = res.data.data;

              })
              .catch((err) => {
                console.log(err);
              });
          }
        });
      } else {
        this.$message({
          type: "error",
          message: ` 请先登录`,
        });
      }
    },
    // 选择评分
    choose(i) {
      switch (i) {
        case 1:
          if (this.ischoose1) {
            this.ischoose1 = false;
          } else {
            this.ischoose1 = true;
            this.pingfen = 1;
            this.Star(1);
          }
          break;
        case 2:
          if (this.ischoose2) {
            this.ischoose2 = false;
          } else {
            this.ischoose2 = true;
            this.pingfen = 2;
            this.Star(2);
          }
          break;
        case 3:
          if (this.ischoose3) {
            this.ischoose3 = false;
          } else {
            this.ischoose3 = true;
            this.pingfen = 3;
            this.Star(3);
          }
          break;
        case 4:
          if (this.ischoose4) {
            this.ischoose4 = false;
          } else {
            this.ischoose4 = true;
            this.pingfen = 4;
            this.Star(4);
          }
          break;
        case 5:
          if (this.ischoose5) {
            this.ischoose5 = false;
          } else {
            this.ischoose5 = true;
            this.pingfen = 5;
            this.Star(5);
          }
          break;
        default:
          console.log(i);
      }
    },
    //临近地铁
    ditie() {
      if (this.isditie) {
        this.isditie = false;
      } else {
        this.isditie = true;
      }
    },
    //搜索酒店名称
    hoteltitle() {
      this.$http
        .post("/hotelSearch", {
          title: this.hoteltitletxt,
          nub: this.nub,
          mid: this.currentPage1,
        })
        .then((res) => {
          this.totalvalue = res.data.num[0].num;
          this.hotelist = res.data.data;
          this.hoteltitletxt = "";
          if (res.data.data.length == 0) {
            this.iskong = true;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.draw {
  font-size: 14px;
  color: #666;
  .ptype {
    padding: 8px 0;
    position: relative !important;
    .price {
      float: right;
    }
  }
  .idowd {
    margin-left: 70px;
  }
  .idowd10 {
    margin-left: 10px;
  }
  // 列表内容
  .hotel-list {
    margin-top: 20px;
    .li1 {
      position: relative;
      display: flex;
      border-bottom: 1px solid #ccc;
      padding: 5px 0;
      .hotelimg {
        width: 330px;
        margin-right: 15px;
      }
      .hotel-item {
        .sc {
          position: absolute;
          top: 10px;
          right: 10px;
        }
        .hotel-info {
          .nums {
            margin: 15px 0 5px;
            color: #999;
            display: flex;
            .rating {
              position: relative;
              .ratnum {
                width: 65px;
                height: 65px;
                /deep/ .el-progress-circle svg {
                  width: 65px;
                  height: 65px;
                }
                /deep/ .el-progress__text {
                  top: 40%;
                }
              }
              .nice {
                position: absolute;
                top: 50%;
                left: 30%;
              }
            }
            em {
              font-size: 16px;
              color: #409eff;
              padding: 0 5px;
            }
            .link {
              font-size: 12px;
              color: #999;
              margin-top: 18px;
              padding-left: 10px;
            }
          }
        }
      }
      // 表格
      .table {
        position: absolute;
        bottom: 30px;
        right: 10px;
        td {
          border-bottom: 1px solid #ccc;
          padding: 5px;
          img {
            width: 100px;
          }
          b {
            color: #409eff;
            font-size: 16px;
          }
          i {
            margin-left: 35px;
            color: #409eff;
            font-weight: bold;
          }
        }
        td:first-child {
          border-right: 1px solid #ccc;
        }
      }
    }
  }
  // 酒店，收藏，综合排名
  .hotel-toolbar {
    border: 1px solid #ccc;
    padding: 5px;
    /deep/ .el-col {
      height: 77px;
      border-right: 1px solid #ccc;
      padding: 5px 15px;
    }
    .col-6 {
      border: 0;
    }
  }
  .ditie {
    padding: 20px 0 10px;
    border-bottom: 1px solid #ccc;
    .iconradio {
      padding: 1px 10px;
      margin-right: 5px;
      background: url(../../assets/img/hotel-detail-icon8.png) no-repeat -70px -220px;
    }
    // 收藏切换图片
    .active {
      background-position: -90px -220px !important ;
    }
  }
  .input {
    border: 0;
    border-bottom: 1px solid #ccc;
  }
  .input:focus {
    outline: none;
  }
  /deep/ .el-col {
    a {
      color: #666;
      text-decoration: none;
      position: relative;
      .icontop {
        position: absolute;
        top: -1px;
        left: 30px;
      }
      .iconbottom {
        position: absolute;
        bottom: -1px;
        left: 30px;
        color: #409eff;
      }
    }
    a:hover {
      color: #409eff;
    }
    b {
      color: #409eff;
    }
  }
  .pagination {
    margin-top: 10px;
    text-align: right;
  }
}
/deep/ .el-tabs--border-card > .el-tabs__content {
  padding: 0;
}
// 住宿等级评分
.val5 {
  height: 25px;
  font-size: 14px;
  i {
    padding: 10px;
    float: left;
    margin-top: 5px;
    background: url(../../assets/img/hotel-detail-icon8.png) no-repeat -70px -220px;
  }
  .choosei {
    background-position: -90px -220px !important ;
  }
  padding: 5px 20px;
  /deep/ .el-rate {
    padding: 5px;
    float: left;
  }
}
.typerate {
  top: 553px !important;
  i {
    margin-top: 0;
    margin-right: 10px;
  }
}
.addressrate {
  top: 544px !important;
  // left: 1250px !important;
  .val5 {
    width: 200px;
    i {
      margin-top: 0;
      margin-right: 10px;
    }
  }
}
.rate {
  top: 553px !important;
  // left: 620px !important;
}
</style>